<template>
  <div>
    <el-table
      :data="onnceTableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" width="60" fixed />
      <el-table-column prop="source" label="来源" width="100" />
      <el-table-column prop="taskName" label="任务名称" width="120" />
      <el-table-column prop="taskArea" label="任务区域" width="100" />
      <el-table-column prop="executeUser" label="执行对象" width="80" />
      <el-table-column prop="entryRequirements" label="录入要求">
        <template #default="{ row }">
          <el-tooltip
            :content="row.entryRequirements"
            placement="top"
            effect="dark"
            class="yellow-tooltip"
          >
            <div
              class="text-ellipsis"
              style="
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ row.entryRequirements }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="120" />
      <el-table-column prop="endDate" label="结束日期" width="120" />
      <el-table-column prop="creator" label="创建人" width="80" />
      <el-table-column prop="taskStatus" label="任务状态" width="100">
        <template #default="{ row }">
          <div class="status-container">
            <div
              class="circle-status"
              :class="getStatusClass(row.taskStatus)"
            ></div>
            <span>{{ getStatusLabel(row.taskStatus) }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column prop="operator" label="操作" fixed="right" width="180">
        <template #default="{ row, $index }">
          <el-button
            type="primary"
            size="small"
            text
            @click="handleCopy(row, $index)"
            >复制</el-button
          >
          <span>
            <el-button
              type="primary"
              size="small"
              :disabled="row.taskStatus !== '1'"
              text
              @click="handleEdit(row, $index)"
              >编辑</el-button
            >
          </span>
          <el-button
            type="danger"
            size="small"
            text
            :disabled="row.taskStatus === '3'"
            @click="handleEdit(row, $index)"
            >失效</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-swapper">
      <el-pagination
        background
        layout="sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import type { TaskItem } from "../types/index";

interface Props {
  tabKey: String;
}

const props = defineProps<Props>();


const emit = defineEmits<{
  "change-title": [title: string, rows: TaskItem];
}>();

const headerCellStyle = () => {
  return {
    backgroundColor: "#f8f8f8", // 设置背景色
    // color: '#000000',           // 设置文字颜色
    fontWeight: "bold",
  };
};
const regionOptions = [
  { label: "全部", value: "0" },
  { label: "待下发", value: "1" },
  { label: "进行中", value: "2" },
  { label: "已结束", value: "3" },
  { label: "已失效", value: "4" },
];

// 根据状态值获取对应的中文名称
const getStatusLabel = (statusValue: string) => {
  const option = regionOptions.find((option) => option.value === statusValue);
  return option ? option.label : statusValue;
};

// 根据状态值获取对应的样式类名
const getStatusClass = (statusValue: string) => {
  switch (statusValue) {
    case "1":
      return "status-pending";
    case "2":
      return "status-processing";
    case "3":
      return "status-completed";
    case "4":
      return "status-expired";
    default:
      return "";
  }
};

const table = [
  {
    id: "1",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements:
      "请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "1",
  },
  {
    id: "2",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "2",
  },
  {
    id: "3",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "3",
  },
  {
    id: "4",
    source: "AI识别",
    taskName: "田间巡查",
    taskArea: "蓝莓",
    executeUser: "张三",
    entryRequirements: "请针对蓝莓",
    startDate: "2025-08-13",
    endDate: "2025-08-13",
    creator: "张三",
    taskStatus: "4",
  },
];
const onnceTableData = ref(table);
const pageInfo = reactive({
  total: 100,
  currentPage: 1,
  pageSize: 10,
});

function handleEdit(row: TaskItem, $index: number) {
  emit("change-title", "编辑", row);
  console.log("编辑", row, $index);
}
function handleCopy(row: TaskItem, $index: number) {
  emit("change-title", "复制", row);
  console.log("编辑", row, $index);
}
function handleSizeChange() {}
function handleCurrentChange() {}
</script>

<style lang="scss" scoped>
.pagination-swapper {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

// 任务状态样式
.status-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.circle-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

// 不同状态的颜色
.status-pending {
  background-color: #ffc107; // 待下发 - 黄色
}

.status-processing {
  background-color: #1989fa; // 进行中 - 蓝色
}

.status-completed {
  background-color: #67c23a; // 已结束 - 绿色
}

.status-expired {
  background-color: #909399; // 已失效 - 灰色
}
</style>
